<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!-- 元素遍历操作：针对DOM树中元素遍历【父子级关系】
		 children()     功能：获取匹配元素集合中每个元素的直接子元素
		 parent()       功能：获取匹配元素集合中每个元素的直接父元素
		 
		 siblings()     功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()         功能：获取匹配元素集合中每个元素的下一个元素
		 prev()         功能：获取匹配元素集合中每个元素的上一个元素
		 
		 each()         功能：遍历匹配元素集合，对每个元素执行指定函数
		 -->
		<style>
			.container{
				border: 1px solid lightpink;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: aquamarine;
				padding: 10px;
				margin: 10px;
			}
			button{
				padding: 10px;
				margin: 10px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		<button id="getclBtn">获取直接子元素</button>
		<button id="getpBtn">获取直接父元素</button>
		<button id="getsBtn">获取兄弟元素</button>
		<button id="getnBtn">获取下一个兄弟元素</button>
		<button id="getprBtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		
		<script>
			/*1.点击  获取直接元素 按钮 .container 父元素 给.box 元素加10px*/
			$("#getclBtn").click(function(){
				$(".container").children().css("border","10px solid #ff00ff");
			});
			/*2.点击 获取父级元素按钮   .container父级背景颜色*/
			$("#getpBtn").click(function(){
				$(".box").parent().css("background","#ffff00");
			});
			/*3.获取兄弟元素按钮 box3的兄弟元素加背景颜色：红色*/
			$("#getsBtn").click(function(){
				$("#box3").siblings().css("background","#fa0404")
			});
			/*4.点击获取下一个兄弟  按钮box2 的下一个元素 加背景颜色#eee*/
			$("#getnBtn").click(function(){
				$("#box2").next().css("background","#eee")
			});
			/*5.点击获取上一个兄弟  按钮box4 的下一个元素 加效果*/
			$("#getprBtn").click(function(){
				$("#box4").prev().css({
					"width":"200px",
					"height":"200px",
					"background-size":"100% 100%",
					"background-image":"url(../img/2.gif)",
					"border-radius":"50%",
					"box-shadow":"10px 10px 50px #ffaaff",
					"background-color":"#ff6b66"
				});
			});
			/*6.点击遍历元素 按钮 实现动态输出这是box1....
			each(function(index,element){传入下标 ${index}
			识别``传入下标${index}
			注意：千万不要加单双引号，别加拼接符号
			})
			*/
			$("#eachBtn").click(function(){
				$(".box").each(function(i,e){//i下标| e元素--形参
					$(e).text(`这是第${i+1}盒子`);
				});
			});
		</script>
	</body>
</html>